<template>
    <div class="container">
        <van-row class="row-title themebg" type="flex" justify="center">
            <van-col span="8">奖品</van-col>
            <van-col span="8">中奖时间</van-col>
            <van-col span="8">领取状态</van-col>
        </van-row>
        <van-row class="row-title" :class="index%2 == 1 ?'dual-bg':'singular-bg'" type="flex" justify="center" v-for="item,index in gameAwardLists" :key="index">
            <van-col span="8">{{item.prize}}</van-col>
            <van-col span="8">{{item.createDateShort}}</van-col>
            <van-col span="8" v-if="item.status == '未发货' || item.status == '未支付'"><van-button type="danger" size="normal" round @click="addAddress(item.authentication)">{{item.status}}</van-button></van-col>
            <van-col span="8" v-else><van-button type="primary" size="normal" round @click="addAddress(item.authentication)">{{item.status}}</van-button></van-col>
        </van-row>
        <div class="van-list__finished-text" v-html="words">没有更多了</div>
    </div>
</template>

<script>
    import {Row,Col,Toast,Dialog} from 'vant';
    import Cookies from 'js-cookie';
    export default {
        name: "Order",
        data(){
            return{
                token:'',
                gameAwardLists:[],
                words:'没有更多了'
            }
        },
        mounted(){
            this.token = Cookies.get("token")
            this.$api.dial.gameAwardInformation({openid:this.token}).then(res=>{
                if(res.code==0){
                    var data = res.data
                    var success = data.success;
                    if(success) {
                        this.gameAwardLists = data.gameAwardJsonList
                    }else{
                        this.words = '没有中奖信息！'
                    }
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        methods:{
            addAddress(authentication){
                this.$router.push({path:'/congratulationl',query:{authentication:authentication}})
            }
        }
    }
</script>

<style lang="less">
    @import "../../assets/less/base";
    .row-title{
        height: 50px;
        line-height: 48px;
        text-align: center;
        font-size: 16px;
        color: #ffff;
    }
    .themebg{
        background: @main-theme-color;
    }
    .singular-bg{
        background: #FFFFFF;
        color: #000;
    }
    .dual-bg{
        background: #F0F0F0;
        color: #000;
    }
    .van-button {
        position: relative;
        display: inline-block;
        height: 35px;
        line-height: 33px;
        box-sizing: border-box;
        text-align: center;
        -webkit-appearance: none;
    }
    .van-button--round {
        border-radius: 0.8em;
    }
</style>
